<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <table class="width-p-100">
                <tr>
                    <td colspan="2">
                        <h1 class="m-0 p-0 c-red f-s-16 text-break align-center line-height-p-180">
                            ${resultVo.result.reportName}
                        </h1>
                    </td>
                </tr>

                <tr class="border-bottom-red">
                    <td class="c-tint-black p-t-10 p-l-10 f-s-15 text-break align-left width-p-50">
                        举报人：${resultVo.result.reportCreatePerson}
                    </td>

                    <td class="c-tint-black p-t-10 p-r-10 f-s-15 text-break align-right width-p-50">
                        <c:if test="${not empty resultVo.result.reportCreatePersonPhone}">
                            举报人手机号：

                            <span class="c-red f-s-25">${resultVo.result.reportCreatePersonPhone}</span>
                        </c:if>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="p-t-5 p-l-10 p-r-10">
                        <p class="m-0 p-0 f-s-14 text-break align-justify text-indent-30 line-height-p-180">
                            ${resultVo.result.reportContent}
                        </p>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="c-red p-t-50 p-l-10 p-r-10 f-s-14 text-break">
                        <div class="timeline-container">
                            <div class="timeline-label">
                                <span class="label label-primary arrowed-in-right label-lg">
                                    <b>举报流程记录</b>
                                </span>
                            </div>

                            <div class="timeline-items">
                                <c:forEach var="reportResRecord" items="${resultVo.result.reportResRecords}">
                                    <c:choose>
                                        <c:when test="${reportResRecord.reportResult eq '1'}">
                                            <div class="timeline-item clearfix">
                                                <div class="timeline-info">
                                                    <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-tint-black no-hover"></i>
                                                </div>

                                                <div class="widget-box transparent">
                                                    <div class="widget-header widget-header-small">
                                                        <h5 class="widget-title smaller c-tint-black">已举报</h5>

                                                        <span class="widget-toolbar c-tint-black">
                                                            <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                            ${reportResRecord.reportHandleTime}
                                                        </span>
                                                    </div>

                                                    <div class="widget-body">
                                                        <div class="widget-main c-tint-black">
                                                            处理人：${reportResRecord.reportHandlePerson}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                        <c:when test="${reportResRecord.reportResult eq '2'}">
                                            <div class="timeline-item clearfix">
                                                <div class="timeline-info">
                                                    <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-orange no-hover"></i>
                                                </div>

                                                <div class="widget-box transparent">
                                                    <div class="widget-header widget-header-small">
                                                        <h5 class="widget-title smaller c-orange">核实中</h5>

                                                        <span class="widget-toolbar c-orange">
                                                            <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                            ${reportResRecord.reportHandleTime}
                                                        </span>
                                                    </div>

                                                    <div class="widget-body">
                                                        <div class="widget-main c-orange">
                                                            处理人：${reportResRecord.reportHandlePerson}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                        <c:when test="${reportResRecord.reportResult eq '3'}">
                                            <div class="timeline-item clearfix">
                                                <div class="timeline-info">
                                                    <i class="timeline-indicator ace-icon iconfont icon-arrow-down btn b-c-blue no-hover"></i>
                                                </div>

                                                <div class="widget-box transparent">
                                                    <div class="widget-header widget-header-small">
                                                        <h5 class="widget-title smaller c-blue">已核实</h5>

                                                        <span class="widget-toolbar c-blue">
                                                            <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                            ${reportResRecord.reportHandleTime}
                                                        </span>
                                                    </div>

                                                    <div class="widget-body">
                                                        <div class="widget-main c-blue">
                                                            处理人：${reportResRecord.reportHandlePerson}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                        <c:when test="${reportResRecord.reportResult eq '4'}">
                                            <div class="timeline-item clearfix">
                                                <div class="timeline-info">
                                                    <i class="timeline-indicator ace-icon iconfont icon-fork btn b-c-red no-hover"></i>
                                                </div>

                                                <div class="widget-box transparent">
                                                    <div class="widget-header widget-header-small">
                                                        <h5 class="widget-title smaller c-red">已关闭</h5>

                                                        <span class="widget-toolbar c-red">
                                                            <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                            ${reportResRecord.reportHandleTime}
                                                        </span>
                                                    </div>

                                                    <div class="widget-body">
                                                        <div class="widget-main c-red">
                                                            处理人：${reportResRecord.reportHandlePerson}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                        <c:when test="${reportResRecord.reportResult eq '5'}">
                                            <div class="timeline-item clearfix">
                                                <div class="timeline-info">
                                                    <i class="timeline-indicator ace-icon iconfont icon-hook btn b-c-green no-hover"></i>
                                                </div>

                                                <div class="widget-box transparent">
                                                    <div class="widget-header widget-header-small">
                                                        <h5 class="widget-title smaller c-green">已发放</h5>

                                                        <span class="widget-toolbar c-green">
                                                            <i class="ace-icon iconfont icon-time bigger-110"></i>
                                                            ${reportResRecord.reportHandleTime}
                                                        </span>
                                                    </div>

                                                    <div class="widget-body">
                                                        <div class="widget-main c-green">
                                                            处理人：${reportResRecord.reportHandlePerson}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                    </c:choose>
                                </c:forEach>
                            </div>
                        </div>
                    </td>
                </tr>

                <c:if test="${not empty resultVo.result.reportImages}">
                    <c:set var="reportImages" value="${fn:split(resultVo.result.reportImages, '|')}"/>

                    <tr>
                        <td colspan="2" class="c-red p-t-50 p-l-10 p-r-10 f-s-14 text-break">
                            举报图片：
                        </td>
                    </tr>

                    <c:forEach var="reportImage" varStatus="status" items="${reportImages}">
                        <tr>
                            <td colspan="2" class="p-t-5 p-l-10 p-r-10 text-break align-center">
                                <c:choose>
                                    <c:when test="${fn:startsWith(reportImage, 'http://') or fn:startsWith(reportImage, 'https://')}">
                                        <img class="img-max-width-p-100" src="${reportImage}">
                                    </c:when>
                                    <c:otherwise>
                                        <img class="img-max-width-p-100" src="<%=basePath%>${reportImage}">
                                    </c:otherwise>
                                </c:choose>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
            </table>
        </div>
    </div>
</div>